@FSW: 375/100;
.hp100 {
  height: 100vh;
}
.fullScreen {
  height: 100vh;
  &.mobile {
    // @media screen and(min-width:1024px) {
    //   max-width: 750px;
    // }

    margin: 0 auto;
  }
}
.client-video {
  position: relative;
  // height: 50%;
  height: unit((100/16 * 9), vw);
  @media screen and(min-width:1024px) {
    position: absolute;
    top: 0;
    bottom: 48px;
    left: 0;
    right: 30%;
    height: unit((70/16 * 9), vw);
    margin: auto;
    // background-color: red;
  }
}
.client-video-container {
  font-size: unit((16 / @FSW), vw);
  height: unit((48 / @FSW), vw);
  line-height: unit((48 / @FSW), vw);
  padding-left: unit((12 / @FSW), vw);
  padding-right: unit((12 / @FSW), vw);
  color: var(--Content-subtle, rgba(60, 60, 67, 0.75));
  @media screen and(min-width:1024px) {
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    padding-left: 12px;
    padding-right: 12px;
    position: absolute;
    bottom: 48px;
    left: 0;
    right: 30%;
  }
  .btn {
    font-size: unit((16 / @FSW), vw);
    padding: unit((6 / @FSW), vw);
    border-color: var(--Fill-4th, rgba(120, 120, 128, 0.08));
    border-radius: var(--Radius-8, 8px);
    background: var(--Fill-4th, rgba(120, 120, 128, 0.08));
    color: var(--Content-subtle, rgba(60, 60, 67, 0.75));
    @media screen and(min-width:1024px) {
      font-size: 16px;
      padding: 6px;
    }
    &.action {
      color: var(--Colors-Brand, #ff5c00);
      border: 1px solid var(--Colors-Brand, #ff5c00);
      background: var(--Colors-Brand-a01, rgba(255, 92, 0, 0.1));
    }
  }
}
.client-bottom {
  position: absolute;
  top: unit((100/16 * 9), vw);

  // top: 50%;
  bottom: unit((32 / @FSW), vw);
  left: 0;
  right: 0;
  margin-top: unit((48 / @FSW), vw);
  @media screen and(min-width:1024px) {
    position: absolute;
    top: 0;
    left: 70%;
    margin-top: 0;
  }
  .tabs {
    height: unit((48 / @FSW), vw);
    border-bottom: 1px solid #e5e6e8;
    @media screen and(min-width:1024px) {
      height: 48px;
    }
    .tab {
      position: relative;
      font-size: unit((16 / @FSW), vw);
      padding: unit((12 / @FSW), vw) unit((40 / @FSW), vw);
      @media screen and(min-width:1024px) {
        font-size: 16px;
        padding: 12px 40px;
      }
      &.active {
        color: #165dff;
        &:after {
          content: '';
          position: absolute;
          bottom: 3px;
          left: 0;
          right: 0;
          margin: 0 auto;
          width: 2em;
          height: 2px;
          background-color: #165dff;
        }
      }
    }
  }
  .tabs-panel {
    position: absolute;
    top: unit((48 / @FSW), vw);

    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: scroll;
    @media screen and(min-width:1024px) {
      top: 48px;
    }
    .panel {
      height: 100%;
      padding: unit((10 / @FSW), vw);
      line-height: 22/14;
      @media screen and(min-width:1024px) {
        padding: 10px;
      }
      .title {
        font-size: unit((16 / @FSW), vw);
        font-weight: bold;
        margin-bottom: unit((4 / @FSW), vw);
        color: #1d2129;
        @media screen and(min-width:1024px) {
          font-size: 16px;
        }
      }
      .desc {
        font-size: unit((14 / @FSW), vw);
        color: #4e5969;
        @media screen and(min-width:1024px) {
          font-size: 14px;
        }
      }
      .btn-exit {
        font-size: unit((16 / @FSW), vw);
        padding: 0.5em;
        border-radius: 8px;
        @media screen and(min-width:1024px) {
          font-size: 16px;
        }
      }
    }
  }
}
.client-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: unit((20 / @FSW), vw);
  font-size: unit((8 / @FSW), vw);
  @media screen and(min-width:1024px) {
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 12px;
    padding: 20px;
  }
}
.align-cm {
  text-align: center;
  vertical-align: middle;
}
